<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <!-- 引入CSS样式 -->
    <link rel="stylesheet" href="./CSS/style.css">
    <script src="./JS/index.js"></script>
    <title>Hello, world!</title>
</head>

<body>
    <!-- 1.头部模块 -->
    <section class="header_area">
        <!-- 导航条 -->
        <div class="header_navbar">
            <div class="container">
                <div class="row nav_row">
                    <!-- logo -->
                    <div class="logo col-lg-3 col-md-9 col-sm-9 col-10">
                        <a href="javascrpit:void(0)"><img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/logo.svg" alt=""></a>
                    </div>
                    <!-- 导航选项 -->
                    <div class="nav col-lg-9 col-md-3 col-sm-3 col-2 nav_ul">
                        <nav class="navbar navbar-expand-lg navbar-light bg-light bg-light1">
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                              <span class="navbar-toggler-icon"></span>
                            </button>
                            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                <ul class="navbar-nav mr-auto">
                                    <li class="nav-item active">
                                        <a class="nav-link" href="javascrpit:void(0)">Home <span class="sr-only">(current)</span></a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="javascrpit:void(0)">About</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="javascrpit:void(0)">Packges</a>
                                    </li>
                                    <li class="nav-item active">
                                        <a class="nav-link" href="javascrpit:void(0)">Services <span class="sr-only">(current)</span></a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="javascrpit:void(0)">Gallery</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="javascrpit:void(0)">Blog</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="javascrpit:void(0)">Contact</a>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <!-- 头部滑块 -->
        <div class="header_slider">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-8">
                        <div class="card slider_card">
                            <div class="card-body card_body">
                                <h5 class="card-title" id="card_title" style="visibility:hidden">Explore The World with <span>TraveLand</span></h5>
                                <p class="card-text" id="card_text" style="visibility:hidden">Lorem ipsum dolor amet, consetetur sadipscing elitr sed diam nonumy eirmod tempor invidun dolore.</p>
                                <a href="javascrpit:void(0)" class="btn btn-primary btn_sty" id="btn_" style="visibility:hidden">Book Now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 2.About 关于模块 -->
    <section class="about pt pb">
        <div class="about_wrapper">
            <!-- 背景图 -->
            <div class="about_image" style="background-image: url(http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/about_image.jpg);"></div>
            <!-- 右侧文本 -->
            <div class="container">
                <div class="row justify-content-end">
                    <div class="col-lg-6">
                        <!-- 右侧卡片 -->
                        <div class="card slider_card">
                            <div class="card-body card_body">
                                <h5 class="card-title">About Us <span>TraveLand in <i>Numbers</i></span></h5>
                                <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dianum eirmod tempor invidunt ut labore et dolore magna aliqyam era sed diam voluptua. At vero eos et accusam etjusto duo dolres etea reb. Stet clita kasd gubergren,
                                    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
                                <a href="javascrpit:void(0)" class="btn btn-primary btn_sty">Read More</a>
                            </div>
                        </div>
                        <!-- 四个小盒子 -->
                        <div class="about_little">
                            <div class="about_item" style="visibility:hidden">
                                <h5>534</h5>
                                <p>Trips Done</p>
                            </div>
                            <div class="about_item" style="visibility:hidden">
                                <h5>534</h5>
                                <p>Trips Done</p>
                            </div>
                            <div class="about_item" style="visibility:hidden">
                                <h5>534</h5>
                                <p>Trips Done</p>
                            </div>
                            <div class="about_item" style="visibility:hidden">
                                <h5>534</h5>
                                <p>Trips Done</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 3.packges 包裹部分 -->
    <section class="packges pt pb">
        <div class="container">
            <!-- 头部 -->
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="title">
                        <h3>Trip Packages</h3>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dianum eirmod tempor invidunt ut labore et dolore magna</p>
                    </div>
                </div>
            </div>
            <!-- 卡片 -->
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="pack_card">
                        <div class="card h-100 card-top">
                            <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/destination-1.jpg" class="card-img-top" alt="...">
                            <div class="card-body card-bo">
                                <a href="javascrpit:void(0)" class="main-btn">Book Now</a>
                                <h5 class="card-title">Tokyo, Japan</h5>
                                <p class="card-text">From $399</p>
                                <a href="javascrpit:void(0)" class="more">&#xe646;</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="pack_card">
                        <div class="card h-100 card-top">
                            <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/destination-2.jpg" class="card-img-top" alt="...">
                            <div class="card-body card-bo">
                                <a href="javascrpit:void(0)" class="main-btn">Book Now</a>
                                <h5 class="card-title">Beijing, China</h5>
                                <p class="card-text">From $599</p>
                                <a href="javascrpit:void(0)" class="more">&#xe646;</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="pack_card">
                        <div class="card h-100 card-top">
                            <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/destination-3.jpg" class="card-img-top" alt="...">
                            <div class="card-body card-bo">
                                <a href="javascrpit:void(0)" class="main-btn">Book Now</a>
                                <h5 class="card-title">Hawaii, USA</h5>
                                <p class="card-text">From $799</p>
                                <a href="javascrpit:void(0)" class="more">&#xe646;</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="pack_card">
                        <div class="card h-100 card-top">
                            <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/destination-4.jpg" class="card-img-top" alt="...">
                            <div class="card-body card-bo">
                                <a href="javascrpit:void(0)" class="main-btn">Book Now</a>
                                <h5 class="card-title">Semporna, Malaysia</h5>
                                <p class="card-text">From $999</p>
                                <a href="javascrpit:void(0)" class="more">&#xe646;</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="pack_card">
                        <div class="card h-100 card-top">
                            <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/destination-5.jpg" class="card-img-top" alt="...">
                            <div class="card-body card-bo">
                                <a href="javascrpit:void(0)" class="main-btn">Book Now</a>
                                <h5 class="card-title">Bangkok, Thailand</h5>
                                <p class="card-text">From $499</p>
                                <a href="javascrpit:void(0)" class="more">&#xe646;</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="pack_card">
                        <div class="card h-100 card-top">
                            <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/destination-6.jpg" class="card-img-top" alt="...">
                            <div class="card-body card-bo">
                                <a href="javascrpit:void(0)" class="main-btn">Book Now</a>
                                <h5 class="card-title">Yushin, Singapore</h5>
                                <p class="card-text">From $299</p>
                                <a href="javascrpit:void(0)" class="more">&#xe646;</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 4.services 服务部分 -->
    <section class="services pt pb">
        <div class="container">
            <!-- 头部 title -->
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="title">
                        <h3>Service We Provide</h3>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dianum eirmod tempor invidunt ut labore et dolore magna</p>
                    </div>
                </div>
            </div>
            <!-- 服务内容 -->
            <div class="row ser-content">
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card h-100 card_s">
                        <!-- 服务图标 -->
                        <div class="card-icon">&#xe603;</div>
                        <!-- 卡片主题 -->
                        <div class="card-body card_body">
                            <h5 class="card-title">Hotel Booking</h5>
                            <p class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dianum eirmod.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="card h-100 card_s">
                        <!-- 服务图标 -->
                        <div class=" card-icon ">&#xe60e;</div>
                        <!-- 卡片主题 -->
                        <div class="card-body card_body ">
                            <h5 class="card-title ">Flight Booking</h5>
                            <p class="card-text ">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dianum eirmod.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 ">
                    <div class="card h-100 card_s ">
                        <!-- 服务图标 -->
                        <div class="card-icon ">&#xe74f;</div>
                        <!-- 卡片主题 -->
                        <div class="card-body card_body ">
                            <h5 class="card-title ">Ship Booking</h5>
                            <p class="card-text ">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dianum eirmod.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 ">
                    <div class="card h-100 card_s ">
                        <!-- 服务图标 -->
                        <div class="card-icon ">&#xe7d7;</div>
                        <!-- 卡片主题 -->
                        <div class="card-body card_body ">
                            <h5 class="card-title ">Car Booking</h5>
                            <p class="card-text ">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dianum eirmod.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>

    <!-- 5.gallery 旅游展示部分 -->
    <section class="gallery pb">
        <div class="container">
            <!-- 头部 -->
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="title">
                        <h3>Trip Gallary</h3>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dianum eirmod tempor invidunt ut labore et dolore magna</p>
                    </div>
                </div>
            </div>
            <!-- 主体展示部分 -->
            <div class="row gallery_main">
                <!-- 左侧部分 -->
                <div class="col-lg-5">
                    <div class="single_gallery mt">
                        <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/gallery-1.jpg" alt="">
                        <a href="javascrpit:void(0)">&#xe614;</a>
                    </div>
                </div>
                <!-- 右侧部分 -->
                <div class="col-lg-7">
                    <div class="row">
                        <!-- 中间图片 -->
                        <div class="col-sm-6">
                            <div class="single_gallery mt">
                                <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/gallery-2.jpg" alt="">
                                <a href="javascrpit:void(0)">&#xe614;</a>
                            </div>
                            <div class="single_gallery mt">
                                <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/gallery-3.jpg" alt="">
                                <a href="javascrpit:void(0)">&#xe614;</a>
                            </div>
                        </div>
                        <!-- 右侧图片 -->
                        <div class="col-sm-6">
                            <div class="single_gallery mt">
                                <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/gallery-4.jpg" alt="">
                                <a href="javascrpit:void(0)">&#xe614;</a>
                            </div>
                            <div class="single_gallery mt">
                                <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/gallery-5.jpg" alt="">
                                <a href="javascrpit:void(0)">&#xe614;</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 6.team 团队部分 -->
    <section class="team pt pb">
        <div class="container">
            <!-- 头部 -->
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="title">
                        <h3>Meet the Team</h3>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dianum eirmod tempor invidunt ut labore et dolore magna</p>
                    </div>
                </div>
            </div>
            <!-- team 团队成员 -->
            <div class="row">
                <div class="col-lg-3  col-sm-6">
                    <div class="teamimg">
                        <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/team-1.jpg" alt="">
                        <div class="teamcontent">
                            <h3>Kim John</h3>
                            <p>Founder and CEO</p>
                            <ul>
                                <li>
                                    <a href="javascrpit:void(0)">&#xeab3;</a>
                                </li>
                                <li>
                                    <a href="javascrpit:void(0)">&#xe622;</a>
                                </li>
                                <li>
                                    <a href="javascrpit:void(0)">&#xe87f;</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="teamimg">
                        <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/team-2.jpg" alt="">
                        <div class="teamcontent">
                            <h3>Sara Smith</h3>
                            <p>Senior Trainer</p>
                            <ul>
                                <li>
                                    <a href="javascrpit:void(0)">&#xeab3;</a>
                                </li>
                                <li>
                                    <a href="javascrpit:void(0)">&#xe622;</a>
                                </li>
                                <li>
                                    <a href="javascrpit:void(0)">&#xe87f;</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="teamimg">
                        <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/team-3.jpg" alt="">
                        <div class="teamcontent">
                            <h3>John Doe</h3>
                            <p>Trip Guide</p>
                            <ul>
                                <li>
                                    <a href="javascrpit:void(0)">&#xeab3;</a>
                                </li>
                                <li>
                                    <a href="javascrpit:void(0)">&#xe622;</a>
                                </li>
                                <li>
                                    <a href="javascrpit:void(0)">&#xe87f;</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="teamimg">
                        <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/team-4.jpg" alt="">
                        <div class="teamcontent">
                            <h3>Ena Smith</h3>
                            <p>Business Manager</p>
                            <ul>
                                <li>
                                    <a href="javascrpit:void(0)">&#xeab3;</a>
                                </li>
                                <li>
                                    <a href="javascrpit:void(0)">&#xe622;</a>
                                </li>
                                <li>
                                    <a href="javascrpit:void(0)">&#xe87f;</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <!-- 7.Blog  博客文章部分 -->
    <section class="testimonial pt pb">
        <div class="container">
            <!-- 头部 -->
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="title">
                        <h3>Recent Blog Post</h3>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dianum eirmod tempor invidunt ut labore et dolore magna</p>
                    </div>
                </div>
            </div>
            <!-- 文章内容模块 -->
            <div class="row">
                <div class="col-lg-6">
                    <!-- 左侧文章 -->
                    <div class="single_blog mt">
                        <div class="blog_img">
                            <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/blog-1.jpg" alt="" width="100%">
                        </div>
                        <div class=" blog_content ">
                            <ul>
                                <li>Posted by: <a href="javascrpit:void(0) ">Michle Smith </a></li>
                                <li>14 June 2023</li>
                            </ul>
                            <h4><a href="javascrpit:void(0) ">Tonumy eirmod tempor invidunt ut labore et dolore magn aaliq yam erat, sed diam voluptua.</a></h4>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn aaliq yam erat, sed diam voluptua. At vero eos et accusam et justo dolores ea rebum Stet clita kasd gubergren
                                sea.
                            </p>
                        </div>
                    </div>
                </div>
                <!-- 右侧文章 -->
                <div class="col-lg-6 ">
                    <div class="single_blog col-sm-flex mt ">
                        <div class="blog_img ">
                            <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/blog-2.jpg " alt=" " ">
                        </div>
                        <div class="blog_content_2 ">
                            <h4><a href="javascrpit:void(0) ">Tonumy eirmod temporinvi unt ut labore et dolore</a></h4>
                            <p>Lorem ipsum dolor sit ametcon setetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
                            <a href="javascrpit:void(0) ">Read More</a>
                        </div>
                    </div>
                    <div class="single_blog col-sm-flex mt ">
                        <div class="blog_img ">
                            <img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/blog-3.jpg " alt=" ">
                        </div>
                        <div class="blog_content_2 ">
                            <h4><a href="javascrpit:void(0) ">Tonumy eirmod temporinvi unt ut labore et dolore</a></h4>
                            <p>Lorem ipsum dolor sit ametcon setetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
                            <a href="javascrpit:void(0) ">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>

    <!-- 8. contact 联系方式模块 -->
    <section class="contact pt pb ">
        <div class="container ">
            <!-- 头部 -->
            <div class="row justify-content-center ">
                <div class="col-lg-6 ">
                    <div class="title ">
                        <h3>Get in Touch</h3>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dianum eirmod tempor invidunt ut labore et dolore magna</p>
                    </div>
                </div>
            </div>
            <!-- 表单部分 -->
            <div class="contact_form ">
                <form action=" " id="contact-form ">
                    <div class="row ">
                        <div class="col-lg-6 ">
                            <div class="single_form mt ">
                                <input type="text " id="name " placeholder="name " name="name ">
                            </div>
                        </div>
                        <div class="col-lg-6 ">
                            <div class="single_form mt ">
                                <input type="text " id="name " placeholder="name " name="name ">
                            </div>
                        </div>
                        <div class="col-lg-6 ">
                            <div class="single_form mt ">
                                <input type="text " id="name " placeholder="name " name="name ">
                            </div>
                        </div>
                        <div class="col-lg-6 ">
                            <div class="single_form mt ">
                                <input type="text " id="name " placeholder="name " name="name ">
                            </div>
                        </div>
                        <div class="col-lg-12 ">
                            <div class="single_form mt ">
                                <textarea name="message " id="message " placeholder="Message "></textarea>
                            </div>
                        </div>
                        <div class="col-lg-12 ">
                            <div class="single_form mt ">
                                <button type="submit main-btn ">Send Message</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- 9. footer 底部模块 -->
    <section class="footer pt pb ">
        <div class="container ">
            <div class="row ">
            <!-- 左侧 -->
                <div class="col-lg-4 col-md-6 order-md-1 order-lg-1 ">
                    <div class="footer_l ">
                        <a href="javascrpit:void(0) " class="footer_logo "><img src="http://demo.mobanwang.com/mb/lo202301/202301033/html/assets/images/logo.svg " alt=" "></a>
                        <p>Lorem ipsum dolor sifsddt amet, conse tetur sadipscing elitr, sed diam onumy eirmod tempor invidunt ut labore et dolore magna aliquya.</p>
                        <ul class="mt ">
                            <li><a href="javascrpit:void(0) ">&#xeab3;</a></li>
                            <li><a href="javascrpit:void(0) ">&#xe622;</a></li>
                            <li><a href="javascrpit:void(0) ">&#xe87f;</a></li>
                            <li><a href="javascrpit:void(0) ">&#xe87d;</a></li>
                        </ul>
                    </div>
                </div>
                <!-- 中间 -->
                <div class="col-lg-4 col-md-12 order-md-3 order-lg-2 ">
                   <div class="link ">
                        <div class="footer_cen ">
                                <h4 class="footer_title ">Quick Link</h4>
                                <ul>
                                    <li><a href="javascrpit:void(0) ">Home</a></li>
                                    <li><a href="javascrpit:void(0) ">About</a></li>
                                    <li><a href="javascrpit:void(0) ">Trip Pacakge</a></li>
                                    <li><a href="javascrpit:void(0) ">Services</a></li>
                                    <li><a href="javascrpit:void(0) ">Gallery</a></li>
                                </ul>
                            </div>
                            <div class="footer_cen ">
                                    <h4 class="footer_title ">Support</h4>
                                    <ul>
                                        <li><a href="javascrpit:void(0) ">Home</a></li>
                                        <li><a href="javascrpit:void(0) ">About</a></li>
                                        <li><a href="javascrpit:void(0) ">Trip Pacakge</a></li>
                                        <li><a href="javascrpit:void(0) ">Services</a></li>
                                        <li><a href="javascrpit:void(0) ">Gallery</a></li>
                                    </ul>
                                </div>
                   </div>
                </div>
                <!-- 右侧 -->
                <div class="col-lg-4 col-md-6 order-md-2 order-lg-3 ">
                    <div class="footer_r ">
                        <h4>Subscribe Newsletter</h4>
                        <p>Lorem ipsum dolor sit amet, consetetur sadip scing elitr, sed diam.</p>
                        <div class="form ">
                            <form action=" ">
                                <input type="text " placeholder="Enter email ">
                                    <button>&#xe60c;</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        
        </div>
    </section>
    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js " integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj " crossorigin="anonymous "></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js " integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct " crossorigin="anonymous "></script>


</body>

</html>